<template>
  <div class="login">
    <div class="banner">
      <!-- <img class="banner__inner" src="//projectimg-1256680128.cos.ap-beijing.myqcloud.com/amis/20230213/1701334309115.jpg" alt=""/> -->
      <img class="banner__inner" :src="loginBanner" alt="" />
    </div>

    <div class="form">
      <div class="title">登录</div>
      <van-field
        v-model="params.mobile"
        placeholder="请输入账号"
        type="text"
        class="phone"
        :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }]"
      />
      <van-field
        v-model="params.password"
        type="password"
        class="password"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
      />
      <div class="btn">
        <van-button type="primary" v-if="!isAllowSubmit" disabled block
          >立即登录</van-button
        >
        <van-button type="primary" v-else block @click="clickSubmit"
          >立即登录</van-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { reactive, computed, inject, getCurrentInstance } from "vue";
import { getUuid } from "@/utils/utils";

const api = inject("api");
const store = useStore();
const router = useRouter();

const params = reactive({
  mobile: localStorage.getItem("mobile") || "",
  password: localStorage.getItem("password") || "",
});

const loginBanner = computed(() => {
  return store.state.tenant.config.loginImage;
});

// 是否允许登录
let isAllowSubmit = computed(() => {
  if (!params.mobile) return false;
  // if (params.mobile.length !== 11) return false
  if (!params.password) return false;
  return true;
});

const clickSubmit = async () => {
  if (isAllowSubmit) {
    await router.replace("/vol");

    // const uuid = getUuid();
    // const res = await api.login({
    //   loginType: "密码登录",
    //   username: params.mobile,
    //   password: params.password,
    //   uuid,
    //   passwordTwo: "",
    //   smsCode: "",
    //   captcha: "",
    // });
    // if (!res.code) {
    //   store.commit("user/SET_TOKEN", res.data.token);
    //   localStorage.setItem("mobile", params.mobile);
    //   localStorage.setItem("password", params.password);
    //   await store.dispatch("user/apiGetUserInfo");
    //   await router.replace("/vol");
    // }
  }
};
</script>
<style scoped></style>
